<template>
  <div class="referrer">
    <user-header :userInfo="userInfo" :istrue="false"></user-header>
    <!-- <div class="content-row1">
      <div class="content-row1-left">
        <img src="../../assets/img/ref-price.png" width="20" height="20">
        <span>消费总额</span>
      </div>
      <div class="content-row1-right" style>
        <span>
          ￥&nbsp;
          <font></font>0&nbsp;
        </span>
      </div>
    </div> -->
    <div class="content-subtitle">
      <router-link class="ref-a" to="/referrer"><span>{{cid? cname+"的":'没有'}}下级</span></router-link>
    </div>
    <div class="referrer-item" ref="wrapper">
      <div class="ref-info">
        <mt-cell v-for="item of list" :label="'身份: '+item.rankName" :key="item.id" :title="item.nickName">
          <span>{{item.phone}}</span>
        </mt-cell>
      </div>
    </div>
    <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import Bscroll from 'better-scroll'
import PublicMenu from '../public/Menu'
import UserHeader from './components/Header'
export default {
  name: 'Refc',
  components: {
    UserHeader,
    PublicMenu
  },
  data () {
    return {
      userInfo: {},
      list: [],
      cid: '',
      cname: ''
    }
  },
  methods: {
    getInfo () {
      if (this.$route.query.cid) {
        this.cid = this.$route.query.cid
        this.cname = this.$route.query.cname
      } else {
        this.cid = this.$store.state.userId
      }
      axios.get('/meimai/interface/member/getMemberData', {
        params: {
          'memberId': this.$store.state.userId
        }
      }).then((res) => {
        let datas = res.data
        console.log(datas.data)
        if (datas.code === 0 && datas.data) {
          this.userInfo = datas.data
        }
      })
      console.log(this.cid)
      axios.get('/meimai/interface/member/getLowerMembers', {
        params: {
          memberId: this.cid
        }
      }).then((res) => {
        let datas = res.data
        console.log(datas)
        if (datas.code === 0) {
          this.list = res.data.array
        }
      })
    }
  },
  mounted () {
    this.getInfo()
    this.scroll = new Bscroll(this.$refs.wrapper, {click: true})
  }
}
</script>

<style lang="stylus" scoped>
.referrer >>> .mint-cell
  border-bottom: .02rem solid #f3f3f3
.referrer >>> .mint-cell-wrapper
.referrer >>> .mint-cell:last-child
  background-image: none
.ref-header
  width: 100%
  height: 2rem
  padding: 0.2rem
  overflow: auto
  background: #ec2935
  .ref-header-left1
    float: left
    margin-left: 0.2rem
    width: 1.6rem
    height: 2rem
    line-height: 2rem
    .content-header-left1-img
      width: 1.6rem
      height: 1.6rem
      vertical-align: middle
      border-radius: 50%
      border: 0.02rem solid #fff
  .ref-header-left2
    float: left
    margin-left: 0.2rem
    height: 2rem
    width: 50%
    color: #fff
    .ref-header-left2-row1
      width: 100%
      margin-top: 0.4rem
      line-height: 0.6rem
      height: 0.6rem
    .ref-header-left2-row1
      margin-top: 0.5rem
.content-row1
  width: 100%
  height: 80px
  padding: 10px 20px
  background: white
  border-bottom: 1px solid #eee
  box-sizing: border-box
  .content-row1-left
    float: left
    line-height: 60px
    img
      width: 20px
      height: 20px
      vertical-align: middle
      margin-bottom: 5px
  .content-row1-right
    float: right
    line-height: 60px
    color: red
.content-subtitle
  background: #f8f8f8
  width: 100%
  height: 40px
  line-height: 40px
  padding-left: 10px
  color: #676767
  line-height: 40px
.referrer-item
  background-color: #f3f3f3
  position: absolute
  left: 0
  right: 0
  top: 4rem
  bottom: .98rem
  overflow: hidden
.ref-a
  color: red
  text-decoration: underline
</style>
